Angular Material Checkbox হল একটি প্রি-বিল্ট UI কম্পোনেন্ট যা Angular অ্যাপ্লিকেশনের জন্য অত্যন্ত কার্যকরী এবং কাস্টমাইজযোগ্য। এটি ম্যাটেরিয়াল ডিজাইন গাইডলাইন অনুসরণ করে তৈরি করা হয়েছে এবং ব্যবহারকারীদের বিভিন্ন অপশন নির্বাচন করতে সাহায্য করে। অ্যাঙ্গুলার ম্যাটেরিয়াল চেকবক্সটি সাধারণ HTML চেকবক্সের চেয়ে অনেক বেশি স্টাইলিশ এবং ফিচারসমৃদ্ধ, যা ডেভেলপারদের সহজেই আধুনিক ইউআই তৈরি করতে সাহায্য করে।

চেকবক্সের প্রধান বৈশিষ্ট্য

• কাস্টমাইজেবল ডিজাইন: চেকবক্সের রং, আকার এবং অন্যান্য স্টাইল কাস্টমাইজ করা যায়।
• থিমিং: Angular Material থিমিং সিস্টেমের সাথে সামঞ্জস্যপূর্ণ।
• ডেটা বাইন্ডিং: Angular এর ngModel বা Reactive Forms এর মাধ্যমে ডেটা বাইন্ডিং করা যায়।
• ডিসেবল এবং চেকড স্টেট: চেকবক্স ডিফল্টভাবে চেকড বা ডিসেবল করা যায়।

অ্যাঙ্গুলার ম্যাটেরিয়াল চেকবক্স ব্যবহার করা

Angular Material এর চেকবক্স ব্যবহার করতে প্রথমে MatCheckboxModule ইমপোর্ট করতে হবে এবং তারপর HTML ফাইলে এটি ব্যবহার করতে হবে।

ধাপ ১: MatCheckboxModule ইমপোর্ট করা

প্রথমে, আপনার app.module.ts ফাইলে MatCheckboxModule ইমপোর্ট করুন:

import { MatCheckboxModule } from '@angular/material/checkbox';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    MatCheckboxModule,  // ইমপোর্ট করুন
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

ধাপ ২: HTML ফাইলে চেকবক্স ব্যবহার করা

এখন আপনি HTML ফাইলে চেকবক্স ব্যবহার করতে পারেন। Angular Material এর চেকবক্সের জন্য mat-checkbox ডিরেকটিভ ব্যবহার করা হয়।

সাধারন চেকবক্স:

<mat-checkbox>Agree to terms and conditions</mat-checkbox>

চেকবক্সের সাথে ডেটা বাইন্ডিং:

Angular এর ngModel ব্যবহার করে চেকবক্সের স্টেট ট্র্যাক করতে পারেন (ইউজার যখন চেকবক্স চেক করে তখন ভ্যালু পরিবর্তন হবে)।

<mat-checkbox [(ngModel)]="isChecked">Agree to terms and conditions</mat-checkbox>

এখানে isChecked হল একটি বুলিয়ান ভ্যারিয়েবল যা চেকবক্সের চেকড স্টেট ট্র্যাক করবে।

চেকবক্স ডিসেবল করা:

আপনি চাইলে চেকবক্সটি ডিসেবলও করতে পারেন।

<mat-checkbox [disabled]="true">Agree to terms and conditions</mat-checkbox>

চেকবক্স চেকড স্টেট:

চেকবক্সকে ডিফল্টভাবে চেকড বা আনচেকড অবস্থায় থাকতে সেট করা যায়।

<mat-checkbox [checked]="true">Agree to terms and conditions</mat-checkbox>

ধাপ ৩: স্টাইল কাস্টমাইজেশন

আপনি Angular Material এর চেকবক্সের স্টাইল কাস্টমাইজ করতে পারেন। এটি CSS বা SCSS এর মাধ্যমে করা যায়। কিছু উদাহরণ নিচে দেওয়া হলো:

রঙ পরিবর্তন:

.mat-checkbox-checked .mat-checkbox-background {
  background-color: #4CAF50;  /* চেকড রঙ পরিবর্তন */
}

সাইজ পরিবর্তন:

mat-checkbox {
  transform: scale(1.5); /* চেকবক্স সাইজ বড় করা */
}

ধাপ ৪: Reactive Forms এর সাথে চেকবক্স ব্যবহার করা

Angular Reactive Forms ব্যবহার করে চেকবক্সের মান ট্র্যাক করা যায়। প্রথমে ReactiveFormsModule ইমপোর্ট করতে হবে এবং তারপর Reactive Form ব্যবহার করা যেতে পারে।

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    ReactiveFormsModule, // ইমপোর্ট করুন
    MatCheckboxModule
  ],
})
export class AppModule { }

এখন চেকবক্সের মান ট্র্যাক করতে FormGroup এবং FormControl ব্যবহার করা যেতে পারে:

import { FormGroup, FormControl } from '@angular/forms';

export class AppComponent {
  checkboxForm = new FormGroup({
    agreeToTerms: new FormControl(false)
  });
}

এটি HTML এ এভাবে ব্যবহার করা হবে:

<form [formGroup]="checkboxForm">
  <mat-checkbox formControlName="agreeToTerms">Agree to terms and conditions</mat-checkbox>
</form>

চেকবক্সের অন্যান্য বৈশিষ্ট্য

• Multi-Select: একাধিক চেকবক্স নির্বাচন করার জন্য, একাধিক চেকবক্স একসাথে ব্যবহার করা যায়।
• Indeterminate State: চেকবক্সে indeterminate স্টেট ব্যবহার করা যেতে পারে, যা চেকবক্সে অস্বীকৃত মান নির্দেশ করে (যেমন, কিছু অপশন চেক করা, কিছু অপশন চেক করা হয়নি)।

<mat-checkbox [indeterminate]="true">Some options</mat-checkbox>

Angular Material এর চেকবক্স একটি অত্যন্ত কাস্টমাইজযোগ্য এবং ব্যবহারকারী বান্ধব কম্পোনেন্ট, যা Angular অ্যাপ্লিকেশনগুলিতে দ্রুত এবং আধুনিক ইউআই তৈরি করতে সাহায্য করে। এটি বিভিন্ন ফিচারের সাথে আসে, যেমন চেকড, ডিসেবল, এবং ইনডিটারমিনেট স্টেট, এবং সহজেই ডেটা বাইন্ডিং এবং স্টাইল কাস্টমাইজেশন সাপোর্ট করে।

Angular Material এর মাধ্যমে আপনি সহজে সুন্দর এবং কাস্টমাইজযোগ্য UI কম্পোনেন্ট তৈরি করতে পারেন। এর মধ্যে একটি জনপ্রিয় কম্পোনেন্ট হলো চেকবক্স (Checkbox)। Angular Material এর MatCheckbox কম্পোনেন্ট ব্যবহার করে আপনি চেকবক্স তৈরি করতে পারেন যা দেখতে আধুনিক এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করে।

বেসিক চেকবক্স ব্যবহার

১. Angular Material ইনস্টল করা

প্রথমে, Angular Material ইনস্টল করতে হবে। যদি আপনি এটি আগে ইনস্টল না করে থাকেন, তবে নিচের কমান্ডটি ব্যবহার করুন:

ng add @angular/material

এটি Angular Material, Angular CDK, এবং Angular Animations ইন্সটল করবে।

২. প্রয়োজনীয় মডিউল ইমপোর্ট করা

চেকবক্স ব্যবহারের জন্য MatCheckboxModule ইমপোর্ট করতে হবে। app.module.ts ফাইলে এটি ইমপোর্ট করুন:

import { MatCheckboxModule } from '@angular/material/checkbox';

@NgModule({
  declarations: [AppComponent],
  imports: [
    MatCheckboxModule,  // MatCheckboxModule ইমপোর্ট করা হয়েছে
    // অন্যান্য মডিউলস
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

৩. HTML ফাইলে বেসিক চেকবক্স তৈরি

এখন আপনি MatCheckbox কম্পোনেন্ট ব্যবহার করে চেকবক্স তৈরি করতে পারেন। নিচে একটি বেসিক চেকবক্সের উদাহরণ দেওয়া হলো:

<mat-checkbox>Accept Terms and Conditions</mat-checkbox>

এটি একটি বেসিক চেকবক্স তৈরি করবে, যেখানে ব্যবহারকারী চেকবক্সে টিক মার্ক দিতে পারবেন।

৪. চেকবক্সের মান (Checked Value) গ্রহণ করা

চেকবক্সের মান (যদি চেকবক্সটি চেক করা হয় বা না হয়) সংগ্রহ করতে আপনি ngModel ব্যবহার করতে পারেন। নিচে একটি উদাহরণ দেওয়া হলো:

<mat-checkbox [(ngModel)]="isChecked">Accept Terms and Conditions</mat-checkbox>

এখানে, isChecked একটি বুলিয়ান ভেরিয়েবল, যা চেকবক্সটি চেক বা আনচেক হলে আপডেট হবে। এটি টাইপ করা ভেরিয়েবলটির মানের উপর নির্ভর করবে।

export class AppComponent {
  isChecked = false;  // ডিফল্টভাবে চেকবক্সটি আনচেক করা
}

৫. চেকবক্সের স্টাইলিং কাস্টমাইজ করা

Angular Material এর মাধ্যমে আপনি চেকবক্সের স্টাইলও কাস্টমাইজ করতে পারেন। যেমন আপনি চেকবক্সের রঙ পরিবর্তন করতে পারেন:

<mat-checkbox color="primary">Accept Terms and Conditions</mat-checkbox>
<mat-checkbox color="accent">Receive Newsletter</mat-checkbox>
<mat-checkbox color="warn">Delete Account</mat-checkbox>

এখানে primary, accent, এবং warn রঙ ব্যবহার করা হয়েছে। Angular Material এর রঙ থিমের মাধ্যমে আপনি এই রঙ পরিবর্তন করতে পারেন।

৬. চেকবক্সের ডিসেবল স্টেট

আপনি চেকবক্সকে ডিসেবল (অচল) করতে চাইলে, disabled অ্যাট্রিবিউট ব্যবহার করতে পারেন:

<mat-checkbox disabled>Disabled Checkbox</mat-checkbox>

এটি চেকবক্সটি ডিসেবল করে দিবে, এবং ব্যবহারকারী এটি চেক বা আনচেক করতে পারবেন না।

Angular Material এর MatCheckbox কম্পোনেন্ট খুবই সহজে ব্যবহারযোগ্য এবং এটি অ্যাপ্লিকেশনে আধুনিক, সুন্দর এবং কার্যকরী চেকবক্স তৈরি করতে সহায়ক। আপনি এই কম্পোনেন্টের মাধ্যমে বিভিন্ন কাস্টমাইজেশন যেমন স্টাইল, রঙ, ডেটা বাইন্ডিং, এবং ডিসেবল স্টেট ইত্যাদি করতে পারেন। Angular Material আপনাকে সঠিকভাবে স্টাইল করা এবং ফাংশনাল চেকবক্স তৈরির জন্য প্রয়োজনীয় সমস্ত বৈশিষ্ট্য প্রদান করে।

Angular Material এর মাধ্যমে চেকবক্স গ্রুপিং (Checkbox Grouping) করা একটি সাধারণ প্রক্রিয়া, যেখানে একাধিক চেকবক্সকে একটি নির্দিষ্ট গ্রুপে রাখা হয় এবং ব্যবহারকারী তাদের মধ্যে এক বা একাধিক চেকবক্স নির্বাচন করতে পারেন। Angular Material এর <mat-checkbox> কম্পোনেন্টের মাধ্যমে চেকবক্স তৈরি করা যায় এবং ngModel বা FormControl ব্যবহার করে তাদের ভ্যালু এবং স্টেট (যেমন, চেক করা বা না চেক করা) পরিচালনা করা যায়।

চেকবক্স গ্রুপিং ব্যবহার করার ক্ষেত্রে, আপনি একাধিক চেকবক্সকে একটি FormGroup এর মধ্যে যুক্ত করতে পারেন। এটি বিশেষভাবে উপকারী যখন আপনি একাধিক চেকবক্সের মান সংগ্রহ করতে চান এবং সমস্ত চেকবক্সের মান একটি নির্দিষ্ট ডাটা মডেলে স্টোর করতে চান।

চেকবক্স গ্রুপিং তৈরি করা

নিচে চেকবক্স গ্রুপিং করার একটি উদাহরণ দেওয়া হলো:

১. অ্যাঙ্গুলার ম্যাটেরিয়াল চেকবক্স ইনপুট ব্যবহার করা

প্রথমে MatCheckboxModule আপনার মডিউলে ইমপোর্ট করতে হবে।

import { MatCheckboxModule } from '@angular/material/checkbox';

@NgModule({
  imports: [MatCheckboxModule]
})
export class AppModule { }

২. চেকবক্স গ্রুপিং HTML টেমপ্লেট

<form [formGroup]="checkboxGroup">
  <mat-checkbox formControlName="option1">Option 1</mat-checkbox>
  <mat-checkbox formControlName="option2">Option 2</mat-checkbox>
  <mat-checkbox formControlName="option3">Option 3</mat-checkbox>
</form>

এখানে আমরা একটি FormGroup ব্যবহার করেছি, যেখানে তিনটি চেকবক্স গ্রুপ করা হয়েছে।

৩. চেকবক্স গ্রুপিং এর জন্য টাইপস্ক্রিপ্ট কোড

প্রথমে আপনার checkboxGroup নামে একটি FormGroup তৈরি করতে হবে। FormControl এর মাধ্যমে প্রতিটি চেকবক্সের মান নিয়ন্ত্রণ করা হবে।

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-checkbox-group',
  templateUrl: './checkbox-group.component.html',
  styleUrls: ['./checkbox-group.component.css']
})
export class CheckboxGroupComponent implements OnInit {

  checkboxGroup: FormGroup;

  ngOnInit() {
    this.checkboxGroup = new FormGroup({
      option1: new FormControl(false),
      option2: new FormControl(false),
      option3: new FormControl(false)
    });
  }

  submit() {
    console.log(this.checkboxGroup.value);
  }
}

এখানে, FormGroup-এ তিনটি FormControl যুক্ত করা হয়েছে, যার প্রতিটির মান false (অর্থাৎ ডিফল্টভাবে চেক করা হয়নি)।

৪. চেকবক্স স্টাইলিং

Angular Material চেকবক্সের জন্য ডিফল্ট স্টাইলিং প্রদান করে, তবে আপনি চাইলে CSS ব্যবহার করে এটি কাস্টমাইজ করতে পারেন:

mat-checkbox {
  margin: 5px;
}

এটি চেকবক্সের মধ্যে স্পেস যোগ করবে।

চেকবক্স গ্রুপিং এর সুবিধা

• ডাটা সংগ্রহ সহজ: একটি গ্রুপে একাধিক চেকবক্স থাকলে, তাদের মান একটি নির্দিষ্ট অবজেক্টে সংগৃহীত হয়, যা ফর্ম সাবমিটের সময় সহজেই ব্যবহার করা যায়।
• ডাইনামিক: ব্যবহারকারীরা একাধিক অপশন সিলেক্ট করতে পারে, যা ডাটা সংগ্রহের ক্ষেত্রে কার্যকর।
• ফর্ম কন্ট্রোল: ngModel বা FormControl ব্যবহার করে চেকবক্সের মান সহজে নিয়ন্ত্রণ করা যায়।
• উন্নত UX/UI: Angular Material এর মাধ্যমে সুন্দর এবং ইন্টারঅ্যাক্টিভ চেকবক্স তৈরি করা সম্ভব।

Angular Material এর মাধ্যমে চেকবক্স গ্রুপিং করা একটি কার্যকর উপায়, যা ব্যবহারকারীদের একাধিক অপশন নির্বাচন করতে সহায়তা করে। FormGroup এবং FormControl ব্যবহার করে আপনি চেকবক্সের মান সংগ্রহ ও পরিচালনা করতে পারেন, এবং Angular Material এর ডিফল্ট স্টাইলিং এর মাধ্যমে একটি আধুনিক UI ডিজাইন করতে পারবেন।